<script>
import $ from "jquery";
import propertyHelper from "./propertyHelper.js";
import slashTool from "../tools/slashTool.js";

export default {
  data () {
    return {
      propertyHelper,
      // 字段集合
      fields: [],
      formData: {
        leftParentType: "default",
        leftParentCellName: null,
        leftParentRowNumber: null,
        topParentType: "default",
        topParentCellName: null,
        topParentRowNumber: null,
        cellType: "simple",
        linkUrl: null,
        linkTargetWindow: "_blank",
        simple: {
          lineHeight: null,
          value: null
        },
        expression: {
          wrapCompute: false,
          expand: "None",
          format: null,
          value: null
        },
        dataset: {
          tab: "config",
          datasetName: null,
          property: null,
          aggregate: "select",
          order: "none",

          lineHeight: null,
          format: null,
          wrapCompute: null,

          expand: "Down",
          fillBlankRows: false,
          multiple: null
        },
        slashs: [],
        image: {
          width: null,
          height: null,
          source: null,
          value: null,
          expand: null
        },
        zxing: {
          width: null,
          height: null,
          source: null,
          value: null,
          category: null,
          data: null,
          format: null,
          expand: null
        },
        chart: {
          dataset: {
            collectType: null,
            datasetName: null,
            categoryProperty: null,
            seriesProperty: null,
            valueProperty: null,
            seriesText: null,
            seriesType: "text",
            labels: null,
            format: null,
            type: "pie"
          },
          options: [
            {
              display: true,
              position: "top",
              fontSize: 14,
              fontColor: "#666",
              fontStyle: "bold",
              padding: 10,
              text: null,
              type: "title"
            },
            {
              display: true,
              position: "bottom",
              labels: null,
              type: "legend"
            },
            {
              duration: 1000,
              easing: "easeOutQuart",
              type: "animation"
            }
          ],
          plugins: [
            {
              display: true,
              name: "data-labels"
            }
          ],
          xaxes: {
            rotation: null,
            format: null,
            display: null,
            scaleLabel: null
          },
          yaxes: {
            rotation: null,
            display: null,
            scaleLabel: null
          }
        }
      }
    };
  },
  methods: {
    // 数据改变时
    dataChange () {
      const { cellDef, context, rowIndex, colIndex } = this.designer;

      if (cellDef.value.type !== this.formData.cellType) {
        cellDef.value = {};
      }

      cellDef.value.type = this.formData.cellType; // 单元格类型
      cellDef.linkUrl = this.formData.linkUrl; // 连接地址
      cellDef.linkTargetWindow = this.formData.linkTargetWindow; // 弹窗方式

      if (cellDef.value.type === "simple") {
        const simple = this.formData.simple;
        cellDef.cellStyle.lineHeight = simple.lineHeight;
        cellDef.value.value = simple.value;
        context.hot.setDataAtCell(rowIndex, colIndex, simple.value);
      } else if (cellDef.value.type === "expression") {
        const expression = this.formData.expression;
        cellDef.cellStyle.wrapCompute = expression.wrapCompute;
        cellDef.cellStyle.format = expression.format;

        cellDef.value.value = expression.value;
        cellDef.expand = expression.expand;
        context.hot.setDataAtCell(rowIndex, colIndex, expression.value);
      } else if (cellDef.value.type === "dataset") {
        const dataset = this.formData.dataset;
        cellDef.value.datasetName = dataset.datasetName;
        cellDef.value.property = dataset.property;
        cellDef.value.aggregate = dataset.aggregate;
        cellDef.value.order = dataset.order;

        cellDef.cellStyle.lineHeight = dataset.lineHeight;
        cellDef.cellStyle.format = dataset.format;
        cellDef.cellStyle.wrapCompute = dataset.wrapCompute;

        cellDef.expand = dataset.expand;
        cellDef.fillBlankRows = dataset.fillBlankRows;
        cellDef.multiple = dataset.multiple;
        this.updateTableData();
        this.getFields(); // 获取字段集合
      } else if (cellDef.value.type === "slash") {
        if (!this.formData.slashs.length) {
          slashTool.buildSlashes(context, rowIndex, colIndex);
        }
        cellDef.value.slashes = this.formData.slashs;
      } else if (cellDef.value.type === "image") {
        cellDef.value.width = this.formData.image.width;
        cellDef.value.height = this.formData.image.height;
        cellDef.value.source = this.formData.image.source;
        cellDef.value.value = this.formData.image.value;
        cellDef.value.expand = this.formData.image.expand;
      } else if (cellDef.value.type === "zxing") {
        cellDef.value.width = this.formData.image.width;
        cellDef.value.height = this.formData.image.height;
        cellDef.value.source = this.formData.image.source;
        cellDef.value.data = this.formData.image.data;
        cellDef.value.category = this.formData.image.category;
        cellDef.value.format = this.formData.image.format;
        cellDef.value.expand = this.formData.image.expand;
      } else if (cellDef.value.type === "chart") {
        cellDef.value.chart = this.formData.chart;
      }
    },
    // 数据初始化
    dataInit () {
      const { context, cellDef, rowIndex, colIndex } = this.designer;
      if (!cellDef) return;

      this.formData.cellType = cellDef.value.type; // 单元格类型
      this.formData.linkUrl = cellDef.linkUrl; // 连接地址
      this.formData.linkTargetWindow = cellDef.linkTargetWindow; // 弹窗方式

      // 初始化左父格
      this.formData.leftParentType = "default";
      const leftParentCellName = cellDef.leftParentCellName;
      if (leftParentCellName) {
        if (leftParentCellName === "root") {
          this.formData.leftParentCellName = "root";
          this.formData.leftParentRowNumber = null;
        } else {
          const parentData = this.parseCellName(leftParentCellName);
          this.formData.leftParentCellName = parentData.name;
          this.formData.leftParentRowNumber = parentData.num;
        }
        this.formData.leftParentType = "custom";
      } else {
        if (colIndex === 0) {
          this.formData.leftParentCellName = "root";
          this.formData.leftParentRowNumber = null;
        } else {
          let row = rowIndex;
          let col = colIndex - 1;
          const td = context.hot.getCell(row, col);
          if ($(td).css("display") === "none") {
            const mergeCells = context.hot.getSettings().mergeCells;
            for (const item of mergeCells) {
              const rowStart = item.row;
              const rowspan = item.rowspan;
              const colStart = item.col;
              const colspan = item.colspan;
              const rowEnd = rowStart + rowspan - 1;
              const colEnd = colStart + colspan - 1;
              if (row >= rowStart && row <= rowEnd && col >= colStart && col <= colEnd) {
                row = rowStart;
                col = colStart;
                break;
              }
            }
          }
          const cellName = context.getCellName(row, col);
          const parentData = this.parseCellName(cellName);
          this.formData.leftParentCellName = parentData.name;
          this.formData.leftParentRowNumber = parentData.num;
        }
      }

      // 初始化上父格
      this.formData.topParentType = "default";
      const topParentCellName = cellDef.topParentCellName;
      if (topParentCellName) {
        if (topParentCellName === "root") {
          this.formData.topParentCellName = "root";
          this.formData.topParentRowNumber = null;
        } else {
          const parentData = this.parseCellName(topParentCellName);
          this.formData.topParentCellName = parentData.name;
          this.formData.topParentRowNumber = parentData.num;
        }
        this.formData.topParentType = "custom";
      } else {
        if (rowIndex === 0) {
          this.formData.topParentCellName = "root";
          this.formData.topParentRowNumber = null;
        } else {
          let row = rowIndex - 1;
          let col = colIndex;
          const td = context.hot.getCell(row, col);
          if ($(td).css("display") === "none") {
            const mergeCells = context.hot.getSettings().mergeCells;
            for (const item of mergeCells) {
              const rowStart = item.row;
              const rowspan = item.rowspan;
              const colStart = item.col;
              const colspan = item.colspan;
              const rowEnd = rowStart + rowspan - 1;
              const colEnd = colStart + colspan - 1;
              if (row >= rowStart && row <= rowEnd && col >= colStart && col <= colEnd) {
                row = rowStart;
                col = colStart;
                break;
              }
            }
          }

          const cellName = context.getCellName(row, col);
          const parentData = this.parseCellName(cellName);
          this.formData.topParentCellName = parentData.name;
          this.formData.topParentRowNumber = parentData.num;
        }
      }
      if (cellDef.value.type === "simple") {
        this.formData.simple.lineHeight = cellDef.cellStyle.lineHeight;
        this.formData.simple.value = cellDef.value.value;
      } else if (cellDef.value.type === "expression") {
        this.formData.expression.wrapCompute = cellDef.cellStyle.wrapCompute;
        this.formData.expression.expand = cellDef.expand;
        this.formData.expression.format = cellDef.cellStyle.format;
        this.formData.expression.value = cellDef.value.value;
      } else if (cellDef.value.type === "dataset") {
        const dataset = this.formData.dataset;
        dataset.datasetName = cellDef.value.datasetName;
        dataset.property = cellDef.value.property;
        dataset.aggregate = cellDef.value.aggregate;
        dataset.order = cellDef.value.order;

        dataset.lineHeight = cellDef.cellStyle.lineHeight;
        dataset.format = cellDef.cellStyle.format;
        dataset.wrapCompute = cellDef.cellStyle.wrapCompute;

        dataset.expand = cellDef.expand;
        dataset.fillBlankRows = cellDef.fillBlankRows;
        dataset.multiple = cellDef.multiple;
      } else if (cellDef.value.type === "slash") {
        this.formData.slashs = cellDef.value.slashes;
        slashTool.doDraw(context, rowIndex, colIndex);
      } else if (cellDef.value.type === "image") {
        this.formData.image.width = cellDef.value.width;
        this.formData.image.height = cellDef.value.height;
        this.formData.image.source = cellDef.value.source;
        this.formData.image.value = cellDef.value.value;
        this.formData.image.expand = cellDef.value.expand;
      } else if (cellDef.value.type === "zxing") {
        this.formData.zxing.width = cellDef.value.width;
        this.formData.zxing.height = cellDef.value.height;
        this.formData.zxing.source = cellDef.value.source;
        this.formData.zxing.data = cellDef.value.data;
        this.formData.zxing.category = cellDef.value.category;
        this.formData.zxing.format = cellDef.value.format;
        this.formData.zxing.expand = cellDef.value.expand;
      } else if (cellDef.value.type === "chart") {
        this.formData.chart = cellDef.value.chart;
      }
    },
    // 单元格类型改变
    cellTypeChange () {
      const { cellDef, context, rowIndex, colIndex } = this.designer;

      if (cellDef.value.type !== this.formData.cellType) {
        cellDef.value = {};
      }

      cellDef.value.type = this.formData.cellType; // 单元格类型
      if (cellDef.value.type === "simple") {
        cellDef.cellStyle.lineHeight = null;
        cellDef.value.value = null;
        context.hot.setDataAtCell(rowIndex, colIndex, null);
      } else if (cellDef.value.type === "expression") {
        cellDef.cellStyle.wrapCompute = null;
        cellDef.cellStyle.format = null;
        cellDef.value.value = null;
        cellDef.expand = "None";
        context.hot.setDataAtCell(rowIndex, colIndex, null);
      } else if (cellDef.value.type === "dataset") {
        cellDef.value.datasetName = null;
        cellDef.value.property = null;
        cellDef.value.aggregate = "select";
        cellDef.value.order = "none";

        cellDef.cellStyle.lineHeight = null;
        cellDef.cellStyle.format = null;
        cellDef.cellStyle.wrapCompute = null;

        cellDef.expand = "Down";
        cellDef.fillBlankRows = false;
        cellDef.multiple = null;
        this.updateTableData();
        this.getFields(); // 获取字段集合
      } else if (cellDef.value.type === "slash") {
        this.formData.slashs = [];
        cellDef.value.slashes = [];
      } else if (cellDef.value.type === "image") {
        cellDef.value.width = null;
        cellDef.value.height = null;
        cellDef.value.source = null;
        cellDef.value.value = null;
        cellDef.value.expand = null;
      } else if (cellDef.value.type === "zxing") {
        cellDef.value.width = null;
        cellDef.value.height = null;
        cellDef.value.source = null;
        cellDef.value.data = null;
        cellDef.value.category = null;
        cellDef.value.format = null;
        cellDef.value.expand = null;
      } else if (cellDef.value.type === "chart") {
        cellDef.value.chart = this.formData.chart;
      }
    },
    // 更新数据集
    updateTableData () {
      const { context, rowIndex, colIndex, row2Index, col2Index } = this.designer;
      const hot = context.hot;
      for (let i = rowIndex; i <= row2Index; i++) {
        for (let j = colIndex; j <= col2Index; j++) {
          const cellDef = hot.context.getCell(i, j);
          if (!cellDef) {
            continue;
          }
          const value = cellDef.value;
          const valueType = cellDef.value.type;
          let data = null;
          if (valueType === "simple") {
            data = value.value;
          } else if (valueType === "dataset") {
            data = value.datasetName + "." + value.aggregate + "(" + value.property + ")";
          } else if (valueType === "expression") {
            data = value.value;
          }
          hot.setDataAtCell(cellDef.rowNumber - 1, cellDef.columnNumber - 1, data);
        }
      }
    },
    // 获取字段集合
    getFields () {
      const { context } = this.designer;
      const datasources = context.reportDef.datasources;
      let fields = [];
      const dsName = this.formData.dataset.datasetName;
      for (const ds of datasources) {
        const datasets = ds.datasets || [];
        for (const dataset of datasets) {
          if (dataset.name === dsName) {
            fields = dataset.fields || [];
            break;
          }
        }
        if (fields.length > 0) {
          break;
        }
      }

      this.fields = fields;
    },
    // 刷新slash
    refreshSlash () {
      const { context, rowIndex, colIndex } = this.designer;
      slashTool.buildSlashes(context, rowIndex, colIndex);
    }
  }
};
</script>
